<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="./css/bootstrap.css" />
	</head>
	<body>
		你好${loginUser.uname}
		<h2 style="text-align: center;">学生信息数据列表</h2>
		<div style="margin: 20px 10px 10px 10px;">
			<div style="display: flex; align-items: center;justify-content: space-between;">
				<div>
					<button id="delOpt"  onclick="deleteAll()" class='btn btn-warning btn-sm'>
					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
					批量删除</button>
					<button type="button" class='btn btn-success btn-sm' data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
						添加
					</button>							
				</div>
				<form action="seByOther" class="form-inline" style="margin: 10px;">
				  <div class="form-group">
				    <label for="exampleInputName1">商品名</label>
				    <input type="text" name="gname" class="form-control" placeholder="name" id="exampleInputName1">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputName2">单价</label>
				    <input type="text" name="gprice" class="form-control" placeholder="age" id="exampleInputName2">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail2">类型</label>
					  <select class="form-control" id="exampleInputEmail2" name="classify">
						  <option value="">全部</option>
						  <option value="蔬菜">蔬菜</option>
						  <option value="厨具">厨具</option>
						  <option value="手机数码">手机数码</option>
						  <option value="休闲娱乐">休闲娱乐</option>
						  <option value="电脑办公">电脑办公</option>
					  </select>
				  </div>
				  <div class="form-group">
				  	<label style="width: 30px;"></label>
				  </div>
				  <button type="submit" class="btn btn-success">
				  	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
				  	查询
				  </button>
				</form>
				
			</div>
			<table class="table table-bordered table-hover">
				<thead>
					<tr class="info">
						<th><input id="allOpt" class="form-control" type="checkbox" /> </th>
						<th>序号</th>
						<th>商品名</th>
						<th>图片</th>
						<th>单价</th>
						<th>库存量</th>
						<th>保值时间</th>
						<th>类型</th>
						<th>简介</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tataBody">
					<c:forEach items="${goods}" var="good" varStatus="tid">
						<tr>
							<th><input type="checkbox"></th>
							<th>${good.gid}</th>
							<th>${good.gname}</th>
							<th><img width="50px" src="${good.gimg}"> </th>
							<th>${good.gprice}</th>
							<th>${good.gstock}</th>
							<th>${good.maintainDate}</th>
							<th>${good.classify}</th>
							<th>${good.gdescribe}</th>
							<th><button class="update btn btn-primary btn-xs">编辑</button>
								<button class="del btn btn-danger btn-xs">删除</button></th>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			
			<!--
            	作者：offline
            	时间：2019-09-21
            	描述：表格底部的分页导航条
            -->
			<nav aria-label="page navigation">
				<ul class="pagination" style="margin: 0;">
				    <li>
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				    <li><a href="#">1</a></li>
				    <li><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li>
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				</ul>
				<label style="font-size: 25px; vertical-align: top; margin-left: 10px;">共5页     48条数据</label>
			</nav>
		</div>
		
		<!--
        	作者：offline
        	时间：2019-09-21
        	描述：添加学生信息的模态窗口
        -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="exampleModalLabel">添加商品信息</h4>
		      </div>
		      <div class="modal-body">
		        <form method="post" enctype="multipart/form-data" action="addGood" class="addForm" id="addForm">
		          <div class="form-group">
		            <label for="gname" class="control-label">商品名</label>
		            <div style="width: 240px;">
		            	<input type="text" class="form-control" name="gname" id="gname" placeholder="请输入商品名" required />
		            </div>
		          </div>
					<div class="form-group">
						<label for="gimg1" class="control-label">商品图片</label>
						<div style="width: 240px;">
							<input type="file" class="form-control" name="gimg" id="gimg"  required />
						</div>
					</div>
		          <div class="form-group">
		            <label for="gprice" class="control-label">商品单价</label>
					<div style="width: 240px;">
		            	<input type="number" class="form-control" name="gprice" id="gprice" placeholder="商品单价" required />
		            </div>
		          </div>
				  <div class="form-group">
		            <label for="gstock" class="control-label">商品库存</label>
					<div style="width: 240px;">
		            	<input type="number" class="form-control" name="gstock" id="gstock" placeholder="商品库存" required />
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="maintainDate" class="control-label">保值时间</label>
		            <div style="width: 240px;">
		            	<input type="date" class="form-control" name="maintainDate" id="maintainDate" placeholder="请输入保值时间" required />
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="classify" class="control-label">类型</label>
		            <div  style="width: 240px;">
						<select class="form-control" id="classify" name="classify">
							<option value="蔬菜">蔬菜</option>
							<option value="厨具">厨具</option>
							<option value="手机数码">手机数码</option>
							<option value="休闲娱乐">休息娱乐</option>
							<option value="电脑办公">电脑办公</option>
						</select>
		            </div>
		          </div>
		          <div class="form-group">
		            <label class="control-label">介绍</label>
		            <textarea class="form-control" name="gdescribe" >这个人很懒，什么都没有说！</textarea>
		          </div>
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <!--因为当前button提交按钮在form标签外部，需要使用form属性对form标签进行关联-->
		        <button type="submit" form="addForm" class="btn btn-primary">确认添加</button>
		      </div>
		    </div>
		  </div>
		</div>

		<!--
    作者：offline
    时间：2019-09-21
    描述：修改学生信息的模态窗口
-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加商品信息</h4>
                        </div>
                        <div class="modal-body">
                            <form action="upGood" class="upForm" id="upForm" enctype="multipart/form-data" method="post">
								<div class="form-group">
									<label for="gid" class="control-label">商品编号</label>
									<div style="width: 240px;">
										<input type="text" class="form-control" name="gid" id="gid" required />
									</div>
								</div>
                                <div class="form-group">
                                    <label for="gname1" class="control-label">商品名</label>
                                    <div style="width: 240px;">
                                        <input type="text" class="form-control" name="gname" id="gname1" placeholder="请输入商品名" required />
                                    </div>
                                </div>
								<div class="form-group">
									<label for="gimg1" class="control-label">商品图片</label>
									<div style="width: 240px;">
										<input type="file" class="form-control" name="gimg" id="gimg1" required />

									</div>
								</div>
                                <div class="form-group">
                                    <label for="gprice1" class="control-label">商品单价</label>
                                    <div style="width: 240px;">
                                        <input type="number" class="form-control" name="gprice" id="gprice1" placeholder="商品单价" required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="gstock1" class="control-label">商品库存</label>
                                    <div style="width: 240px;">
                                        <input type="number" class="form-control" name="gstock" id="gstock1" placeholder="商品库存" required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="maintainDate1" class="control-label">保值时间</label>
                                    <div style="width: 240px;">
                                        <input type="date" class="form-control" name="maintainDate" id="maintainDate1" placeholder="请输入保值时间" required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="classify1" class="control-label">类型</label>
                                    <div  style="width: 240px;">
                                        <select class="form-control" id="classify1" name="classify">
                                            <option value="蔬菜">蔬菜</option>
                                            <option value="厨具">厨具</option>
                                            <option value="手机数码">手机数码</option>
                                            <option value="休闲娱乐">休息娱乐</option>
                                            <option value="电脑办公">电脑办公</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">介绍</label>
                                    <textarea class="form-control" id="gdescribe1" name="gdescribe" >这个人很懒，什么都没有说！</textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

                            <button type="submit" form="upForm" class="btn btn-primary">确认修改</button>
                        </div>
                    </div>
                </div>
            </div>

		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>



			$("#allOpt").click(function(){
				console.log(1)
				console.log($("#tataBody tr th:first-child"))
				$("#tataBody tr>th input").prop("checked",this.checked);
			})
			//全部被选择或为全部时候，改变全选所选
			$("#tataBody tr>th").on("change","input",function(){
				if($("#tataBody tr>th input:checked").length ==
						$("#tataBody tr>th input:checkbox").length){
					//全选框选择
					$("#allOpt").prop("checked",true);
				}else{
					$("#allOpt").prop("checked",false);
				}
			})

			//批量删除
			$("#delOpt").click(function(){
				if($("#tataBody tr>th input:checked").length ==0){
					alert("你没有选择任何一条数据")
				}else{
					let TorF=confirm("你确定要删除当前所选择的数据吗？？？");
					if(TorF){

						let returnDelAll = "delAllGood?1=1"
						//被选择的循环
						$("#tataBody tr>th input:checked").each(function(){
							returnDelAll =returnDelAll+"&gid="+$(this).parent().siblings().eq(0).text()
						})
						location.href=returnDelAll
					}
				}
			})

			$(".del").on("click",function (){
				let gid = $(this).parent().siblings().eq(1).text();
				location.href="delGood?gid="+gid;
			})



			//编辑
			$("#tataBody tr th").on("click",".update",function(){
				$("#gid").val($(this).parent().siblings().eq(1).text())
				$("#gname1").val($(this).parent().siblings().eq(2).text())
				// $("#gimg1")
				$("#gprice1").val($(this).parent().siblings().eq(4).text())
				$("#gstock1").val($(this).parent().siblings().eq(5).text())
				$("#maintainDate1").val($(this).parent().siblings().eq(6).text())
				let classs = $(this).parent().siblings().eq(7).text()
				$("#classify1 option:contains("+classs+")").attr("selected",true)
				$("#gdescribe1").val($(this).parent().siblings().eq(8).text())
				$("#myModal").modal()
			//	1-7 除2
			})
		</script>
	</body>
</html>
